<template>
	<view class="commodity-details">
		<view class="cd_header">
			<view class="cd_header_img">
				<image class="imgBox" :src="data.img" mode="aspectFill"></image>
			</view>
			<view class="cd_header_bg">
				<view class="exhibition">
					<view class="exhibition_title">
						<view class="exhibition_title_img">
							<image v-if="data.type == 1" class="imgBox" src="/static/newsImg/de_sw.png" mode="widthFix">
							</image>
							<image v-else-if="data.type == 2" class="imgBox" src="/static/newsImg/de_nft.png"
								mode="widthFix"></image>
							<image v-else-if="data.type == 5" style="width: 146rpx;" class="imgBox" src="/static/newsImg/de_mhyhq.png" mode="widthFix"></image>
							<image v-else class="imgBox" src="/static/newsImg/de_xs.png" mode="widthFix"></image>
						</view>
						<text :class="data.type == 5?'type_five':''">{{data.name}}</text>
					</view>
					<view class="exhibition_center">
						<view class="yuan"></view>
						<view class="line"></view>
						<view class="yuan"></view>
					</view>
					<view class="exhibition_coco">
						<view class="info_coco">
							<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="data.priceType == 1"></image>
                            <image src="/static/newsImg/shenye_cion02.png" mode="" v-if="data.priceType == 2"></image>
							<view class="num">{{data.price}}<text>{{data.priceTypeDict}}</text> </view>
						</view>
						<view class="service_charge">剩余库存：{{data.surplusStock}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="use_rules">
			<view class="use_rules_title">使用规则</view>
			<view class="use_rules_content">{{data.rule}}</view>
		</view>
		<view class="graphic_details" v-if="data.content != ''">
			<view class="graphic_details_title">
				<image src="/static/newsImg/de_icon.png" mode=""></image>
				<view class="gd_word">图文详情</view>
				<image src="/static/newsImg/de_icon.png" mode=""></image>
			</view>
			<view class="graphic_details_content">
				<rich-text :nodes="data.content"></rich-text>
			</view>
		</view>

		<view class="cd_footer">
			<view class="but but_no"  v-if="data.surplusStock == 0">已售罄</view>
			<view class="but" @click="openPay" v-if="data.surplusStock > 0">立即兑换</view>
			
		</view>
		<uni-popup ref="popup">
			<view class="popupBox">
				<view class="title">
					<view class="title_left">选择配送地址</view>
					<view class="title_right" @click="editAddress">
						<image src="/static/newsImg/edit.png" mode=""></image>
						<text>修改</text>
					</view>
				</view>
				<view class="content">
					<text class="c_title">配送地址：</text>
					<view class="info">
						<text class="name">{{addressInfo.contactsPeople}}</text>
						<text class="tel">{{addressInfo.phone}}</text>
					</view>
					<view class="address">
						{{addressInfo.regionalInformation}} {{addressInfo.locAddress}}
					</view>
				</view>
				<view class="but">
					<view class="cancel" @click="closePopup">取消</view>
					<view class="determine" @click="passwordOpen">确定</view>
				</view>
			</view>
		</uni-popup>
		<DetailDialog ref="popupBox" :data='data' v-if="popupBoxStatus" @determine="determine" @close='passwordClose'>
		</DetailDialog>
	</view>
</template>

<script>
	import {
		getCommodityInfo,
		getDefaultAddress,
		putCommodityExchange
	} from '@/api/api-v1-2.js'
	import {
		rsaEncrypt,
	} from '@/common/RSA.js'
	import DetailDialog from './components/DetailDialog.vue'
	export default {
		components: {
			DetailDialog,
		},
		data() {
			return {
				popupBoxStatus: false,
				data: {},
				id: '',
				addressInfo: {
					id: '',
					contactsPeople: '',
					phone: '',
					regionalInformation: '',
					locAddress: '',
				},
				addressStatus: true, // 判断是否是地址返回数据
			}
		},
		onLoad(e) {
			this.id = e.id
			
			// if(e.addressId != undefined){
			// 	this.addressInfo.id = e.addressId
			// 	this.addressInfo.contactsPeople = e.contactsPeople
			// 	this.addressInfo.phone = e.phone
			// 	this.addressInfo.regionalInformation = e.regionalInformation
			// 	this.addressInfo.locAddress = e.locAddress
			// 	this.addressStatus = false
			// 	this.$nextTick(()=>{
			// 		this.openPopup()
			// 	})
			// }else{
			// 	this.addressStatus = true

			// }
			console.log()
		},
		onShow() {
			let that = this
			this.popupBoxStatus = false
			this.getDetailsInfo()
			// that.addressStatus = true
			uni.$on('updateData', function(e) {
				that.addressInfo.id = e.addressId
				that.addressInfo.contactsPeople = e.contactsPeople
				that.addressInfo.phone = e.phone
				that.addressInfo.regionalInformation = e.regionalInformation
				that.addressInfo.locAddress = e.locAddress
				that.addressStatus = false
				that.$nextTick(() => {-
					that.openPopup()
				})
			})
			// console.log(that.addressStatus)
		},
		methods: {
			// 获取详细信息
			getDetailsInfo() {
				uni.showLoading({
					title: '加载中'
				})
				getCommodityInfo(this.id).then(res => {
					// console.log(res)
					this.data = res.result
					uni.hideLoading()
				})
			},
			editAddress() {
				this.closePopup()
				uni.navigateTo({
					url: '/pages/my/set-up/my-address/my-address?shopId=' + this.data.id
				})
			},
			// 地址弹窗
			openPopup() {
				// if (this.$refs.popup) {
				// 	this.$refs.popup.open()
				// } else {
				// 	this.openPopup()
				// }
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 输入密码弹窗
			passwordOpen() {
				this.closePopup()
				this.popupBoxStatus = true
			},
			passwordClose() {
				this.popupBoxStatus = false
			},
			// 确认支付
			async determine(e) {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				var data = {
					tradePassword: e,
					id: this.data.id
				}
				if (this.data.type == 1) {
					data.customerAddressId = this.addressInfo.id
				}
				let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
				let params = {
					encryptData: jiami
				}
				try {
					// var res = await putCommodityExchange(data)
					var res = await putCommodityExchange(params)
					uni.hideLoading()
					var data = res.result
					uni.navigateTo({
						url: `/pages/my/shenye-market/commodity-details/successPage/successPage?id=${data.id}&name=${data.name}&orderNo=${data.orderNo}&tradeTime=${data.tradeTime}`
					})
				} catch (e) {
					uni.hideLoading()
					this.$refs.popupBox.password = ''
				}

			},
			async openPay() {
                if(this.data.surplusStock <= 0){
                	uni.showToast({
                		title:'商品已售罄！',
                		icon:'none'
                	})
                }else if(this.data.exchangeType == 2){
                    	uni.showToast({
                    		title:`仅限兑换${this.data.exchangeLimitNum }件`,
                    		icon:'none'
                    	})
                }
                else if (this.data.type == 1) {
					// console.log(this.addressStatus)
					if (this.addressStatus) {
						try{
							var res = await getDefaultAddress()
							this.addressInfo = res.result
						}catch{
							this.editAddress()
						}
					}
					this.openPopup()
				} 
                else {
					this.popupBoxStatus = true
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5;
	}

	.commodity-details {
		padding-bottom: 180rpx;
	}

	.cd_header_img {
		width: 750rpx;
		height: 500rpx;
		background: #ffffff;
	}

	.cd_header_bg {
		width: 100%;
		height: 360rpx;
	}

	.exhibition {
		position: relative;
		z-index: 2;
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: -50rpx;
	}

	.exhibition_title {
		width: 100%;
		/* line-height: 56rpx; */
		color: #222222;
		font-size: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		line-height: 56rpx;
		position: relative;

	}

	.exhibition_title_img {
		position: absolute;
		left: 30rpx;
		min-width: 120rpx;
		height: 56rpx;
	}

	.exhibition_title text {
		padding-left: 134rpx;
	}
	.type_five{
		padding-left: 160rpx !important;
	}

	.exhibition_center {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.exhibition_center .yuan {
		position: absolute;
		width: 38rpx;
		height: 38rpx;
		background: #F5F5F5;
		border-radius: 50%;
	}

	.exhibition_center .yuan:nth-child(1) {
		left: -14rpx;
	}

	.exhibition_center .yuan:nth-child(3) {
		right: -14rpx;
	}

	.exhibition_center .line {
		width: 624rpx;
		height: 0;
		margin: 0 auto;
		border-bottom: 1rpx dashed #DEDEDE;
	}

	.exhibition_coco {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx 52rpx 30rpx;

	}

	.service_charge {
		font-size: 24rpx;
		color: #666666;
	}

	.info_coco {
		font-size: 30rpx;
		color: #FF1919;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.info_coco .num {
		font-size: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.info_coco text {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.info_coco image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}

	/* 使用规则 */
	.use_rules {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.use_rules_title {
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 20rpx;
	}

	.use_rules_content {
		font-size: 28rpx;
		color: #444444;
	}

	/* 图文详情 */
	.graphic_details {
		margin-top: 60rpx;
	}

	.graphic_details_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.graphic_details_title image {
		width: 34rpx;
		height: 20rpx;
	}

	.graphic_details_title .gd_word {
		margin: 0 32rpx;
		font-size: 30rpx;
		color: #222222;
	}

	.graphic_details_title image:last-child {
		transform: rotate(180deg);
	}

	.graphic_details_content {
		padding: 0 32rpx;
		width: 100%;
		box-sizing: border-box;
	}

	/*  */
	.cd_footer {
		width: 750rpx;
		height: 148rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0px -2rpx 8rpx rgba(204, 204, 204, 0.35);
		display: flex;
		justify-content: center;
	}

	.cd_footer .but {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 36rpx;
		margin-top: 18rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		border-radius: 8rpx;
	}
	  .cd_footer .but_no {
		background: #BABABA;
	  }
	/* 弹窗 */
	.popupBox {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title_left {
		font-size: 36rpx;
		color: #222222;
	}

	.title_right {
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 30rpx;
		color: #1D46ED;
	}

	.title_right image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}

	.popupBox .content {
		width: 630rpx;
		border: 1rpx solid #ABABAB;
		border-radius: 12rpx;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #666666;
	}

	.content .info {
		margin: 20rpx 0;
		color: #222222;
	}

	.content .name {
		margin-right: 30rpx;
	}

	.but {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
	}

	.but view {

		height: 92rpx;
		font-size: 36rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 8rpx;
	}

	.but .cancel {
		width: 228rpx;
		margin-right: 90rpx;
		border: 2rpx solid #979797;
		color: #555555;
	}

	.but .determine {
		width: 233rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		color: #ffffff;
	}
</style>
